<%--
  Created by IntelliJ IDEA.
  User: duanzx
  Date: 2021/2/22
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>极光游戏（CLIPJOINT.COM）-全方位正版游戏服务平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <link rel="shortcut icon" href="${ bp }/static/image/favicon.ico" />
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        * {margin: 0;padding: 0}
        a {cursor: pointer;text-decoration: none;}
        .top {width: 100%;height: 30px;padding-left: 60px;line-height: 30px;overflow: hidden;background-color:#2b2c31;}
        .show {color:rgba(255, 255, 255, 0.7) ;}
        .index {color:rgba(255, 255, 255, 0.7) ;}
        .primary {color: #ffffff;}
        .index:hover {color: #ffffff;}
        .community-content {padding: 110px 0 40px;width: 1200px;margin: 0 auto;position: relative;min-height: 100vh;}
        .community-content:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .community-content .tabs-container {min-height: 603px;margin-top: 30px;}
        .tabs-container .left-menu-tabs-buttons {float: left;width: 160px;height: auto;background: #282931;overflow: hidden;border-radius: 5px 5px 5px 5px;}
        .left-menu-tabs-buttons .first-title {font-size: 18px;color: #ffffff;margin: 0 20px 5px 20px;padding-bottom: 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
        .left-menu-tabs-buttons .tabs-button {padding: 0;float: none;border-top: none;height: 42px;}
        .tabs-buttons .tabs-button {line-height: 54px;border-width: 4px 0 0;border-style: solid;border-color: transparent;font-size: 16px;}
        .tabs-button a {font-size: 16px;color: rgba(255, 255, 255, 0.6);display: block;line-height: 42px;text-align: center;}
        .tabs-button .active {color: #ff6900;background: rgba(255, 255, 255, 0.05)!important;}
        .active {color: #ff6900;background: rgba(255, 255, 255, 0.05);}
        .user-center {margin: 0 0 0 180px;background:transparent }
        .user-center .home-container {font-size: 14px;color: #FFFFFF}
        .home-container .info-container { height: 150px;box-sizing: border-box ;color: #FFFFFF;background:#282931}
        .home-container:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .info-container:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .home-container .home-content {background: #282931;padding: 20px 20px 10px 20px;margin-top: 20px}
        .info-left {float: left;margin: 20px 20px 0 20px }
        .info-left img {width: 100px;height: 100px;border-radius: 50% 50% 50% 50%}
        .info-middle {float: left ;margin:30px 0 0 30px}
        .middle-top {margin-bottom: 16px}
        .middle-top h1 {float: left;font-size: 22px;max-width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 600;}
        .middle-crdite {margin-bottom: 2px;}
        .middle-account {}
        .info-right {float: right;margin:30px 20px 0 0 }
        .info-right .right-top {margin-bottom: 35px;text-align: right }
        .right-top a {color: rgba(255,255,255,0.5) }
        .right-top i {font-size: 22px;position: relative;color: rgba(255, 255, 255, 0.3);top: 3px;margin-right: 3px;}
        .fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;text-rendering: auto;-webkit-font-smoothing: antialiased;}
        .fa span {font-size: 18px}
    </style>
</head>
<body>

    <!-- 公共头部/首页 -->
    <%@ include file="../common/index-header.jsp" %>

    <div class="top">
        <span class="show">您的位置：</span>
        <a href="/" class="index">首页 》</a>
        <a href="" class="primary">个人中心</a>
    </div>

    <div class="community-content">
        <div class="tabs-container">
            <div class="tabs-buttons left-menu-tabs-buttons">
                <div class="tabs-button first-title">订单中心</div>
                <div class="tabs-button">
                    <a href="${ bp }/user?method=purchased" >我的订单</a>
                </div>
                <div class="tabs-button">
                    <a href="${ bp }/user?method=gamefactory" >我的游戏</a>
                </div>
                <div class="tabs-button first-title">我的财产</div>
                <div class="tabs-button">
                    <a href="${ bp }/user?method=wallet" >我的钱包</a>
                </div>
                <div class="tabs-button first-title">我的账户</div>
                <div class="tabs-button">
                    <a href="/setting/info.jsp" >基本信息</a>
                </div>
                <div class="tabs-button">
                    <a href="/setting/security.jsp" >账号安全</a>
                </div>
                <div class="tabs-button">
                    <a href="${ bp }/user?method=dream" >愿望单</a>
                </div>
            </div>
            <div class="user-center">
                <div class="home-container">
                    <div class="info-container">
                        <div class="info-left">
                            <img src="${ bp }${ onlineUser.image }">
                        </div>
                        <div class="info-middle">
                            <div class="middle-top">
                                <h1>${ onlineUser.username }</h1>
                            </div>
                            <div class="middle-crdite">
                                <p>积分：${ onlineUser.credit }</p>
                            </div>
                            <div class="middle-account">
                                <p>余额：${ onlineUser.account }</p>
                            </div>
                        </div>
                        <div class="info-right">
                            <div class="right-top">
                                <a href="/setting/info.jsp">
                                    <i class="fa">
                                        <svg t="1613985763564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="16" height="16"><path d="M972.8 224c-153.6 147.2-307.2 307.2-454.4 460.8l-12.8 12.8c-64 102.4-172.8 115.2-275.2 147.2-19.2 6.4-51.2-32-44.8-51.2 19.2-64 32-128 51.2-185.6 6.4-12.8 12.8-19.2 19.2-25.6C396.8 448 544 307.2 684.8 172.8c32-32 64-70.4 96-108.8 44.8-51.2 102.4-51.2 147.2-6.4 32 25.6 128 89.6 44.8 166.4z m-230.4-12.8L326.4 627.2l70.4 70.4c140.8-134.4 281.6-275.2 416-409.6-25.6-25.6-51.2-51.2-70.4-76.8z m32-57.6c32 32 64 64 102.4 96 6.4-6.4 25.6-19.2 32-32 57.6-64 51.2-57.6-12.8-121.6l-6.4-6.4c-19.2-12.8-32-12.8-51.2 0l-64 64zM256 774.4c32-12.8 57.6-25.6 76.8-32-12.8-19.2-25.6-38.4-44.8-57.6-12.8 32-19.2 57.6-32 89.6z" fill="#dbdbdb" p-id="1561"></path><path d="M460.8 998.4H185.6c-51.2 0-96-12.8-128-57.6-19.2-25.6-25.6-57.6-25.6-89.6V300.8c0-96 64-160 160-160h300.8c19.2 0 44.8 0 44.8 32-6.4 19.2-25.6 32-57.6 32H192c-70.4 0-108.8 38.4-108.8 108.8v531.2c0 57.6 38.4 96 89.6 96h569.6c44.8 0 76.8-32 76.8-83.2V492.8v-25.6c6.4-12.8 19.2-25.6 32-25.6s19.2 19.2 25.6 32V851.2c0 102.4-44.8 147.2-147.2 147.2H460.8z" fill="#dbdbdb" p-id="1562"></path></svg>
                                        <span>修改资料</span>
                                    </i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 公共底部 -->
    <%@ include file="../common/footer.jsp" %>

</body>
</html>
